<template>
  <div style="width: 100%;height:100%">
 
    <!-- {{modelValue}} -->
     <!-- onresize='refresh()' -->
    
    <div ref="myEChats" style="width: 100%;height:100%" >
      <!-- 132132 -->
    </div>
  </div>
  
</template>
<script>
import * as echarts from 'echarts'
  export default {
    props:{
      type:String,
      modelValue:[String,Boolean,Array],
      options:Object,
      color:Array,//调色盘颜色列表
      dimensions:{
        type:Array,
        default:null
      },
      xFormatter:{
        type:String,
        default:'{value}月' 
      },
      yAxis:{
        type:Array,
        default(){
          return []
        }
      },  
      legend:Boolean,
      series:{
        type:[Array,Object],
        default(a){
          return [
            { 
              type: 'bar',
              // barWidth: '20%',
              // encode: {
              //   // 将 "amount" 列映射到 X 轴。
              //   x: 'total',
              //   // 将 "product" 列映射到 Y 轴。
              //   y: 'abc'
              // },
              itemStyle:{
                normal:{
                  label:{
                    show:true,
                    position:"top",
                    // textStyle:{}
                  }
                }
              },
              ...a
            }
            
          ]
        }
      },
      xName:String,   //横轴名称
      yName:String      //Y轴名称
 
    },
    emits: ["update:modelValue"],
    name: 'myECharts',
    data(){
      return {
        myChart:null,
      }
    },

    methods: {
      refresh(){
        if(this.myChart)
        {
          this.myChart.resize();
        }
        
      },
      draw(){
        if(!this.myChart)
        {
          
          this.myChart = echarts.init(this.$refs.myEChats)
          
        }
        
        const options={
        
          xAxis: {
            type: 'category',
            name:this.xName,
            show:(this.type=='pie' || this.type=='semiCircle')?false:true,
            splitLine:{//背景 横/竖 线
              show:false
            },
            //横线
            axisLine:{
              show:true
            },
            //刻度
            axisTick:{
              show:false
            },
            nameTextStyle:{
              triggerEvent:true,
              // overflow:'truncate',
              // ellipsis:"..."
              // color:'red',
              // verticalAlign:'bottom'
              // align:'right'
            },
            //坐标轴刻度标签的相关设置。
            axisLabel:{
              overflow:'breakAll',//超出宽度换行
              ellipsis:"...",
                // showMaxLabel:false,
                // showMinLabel:false,
                // hideOverlap:true,
              fontSize:14,
              interval:0, 
              fontWeight: 400,
              color:'#4BA0DD', 
              rotate:50,//字体倾斜
              formatter:this.xFormatter
            }
            // axisLabel: {   //字体倾斜 
            //   interval:0,  
            //   rotate:80 
            // },
          },
          yAxis: [
            {
              name:this.yName,
              // value:'category'
              type:"value",
              splitLine:{
                show:false
              },
              axisLabel:{
                fontSize:14,
                interval:0, 
                fontWeight: 400,
                color:'#4BA0DD', 
              },
              
            },
            ...this.yAxis
          ],
          legend:{//图例
            show:this.legend?true:false,
            right:0,
             textStyle:{
              color:'#fff'
            }
            // itemStyle:{
            //   color:'#fff'
            // }
            // data: ['全部案件数', '电子送达数量']

          },
          color:this.color?this.color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
          series: this.series,
          dataset:{
            dimensions: this.dimensions,
            // dimensions: ['product', '2015', '2016', '2017'],
            source: this.modelValue
            // source: [
            //   ['product', '2015', '2016', '2017'],
            //   ['Matcha Latte', 43.3, 85.8, 93.7],
            //   ['Milk Tea', 83.1, 73.4, 55.1],
            //   ['Cheese Cocoa', 86.4, 65.2, 82.5],
            //   ['Walnut Brownie', 72.4, 53.9, 39.1]
            // ]
          },
          grid:{
            bottom:30,
            containLabel:false,
            show:false,
            top:'10%',
            tooltip:{
              show:true
            }
            // z:0
          },
          // tooltip: {
          //   trigger: 'axis',
          //   axisPointer: {
          //     type: 'cross',
          //     axis: 'auto', // 指示器的坐标轴。 
              
          //   },
          //   showContent: true,
          //   triggerOn:'mousemove'
          // }
          tooltip:{
            show:true,
            trigger: 'item',
            // axisPointer: { // 坐标轴指示器配置项。
            //       type: 'cross', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            //       axis: 'auto', // 指示器的坐标轴。 
            //       // snap: true, // 坐标轴指示器是否自动吸附到点上
            //   },
            showContent: true,
            backgroundColor: 'rgba(0,7,22,1)', // 提示框浮层的背景颜色。
            borderColor: '#4BBAF4FF', // 提示框浮层的边框颜色。
            borderWidth:1, // 提示框浮层的边框宽。
            padding: 7, // 提示框浮层内边距，
            textStyle: { // 提示框浮层的文本样式。
              color: '#fff',
              fontStyle: 'normal',
              fontWeight: 'normal',
              fontSize: 12,
              fontWeight: 400
            },
            // formatter:'{a} {b} \n {a1} {b1}'
          },
          
        }
        console.log(options)
        this.myChart.setOption(options)
        // tooltip: {
          //     show: true, // 是否显示
          //     trigger: 'axis', // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
          //     axisPointer: { // 坐标轴指示器配置项。
          //         type: 'shadow', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
          //         axis: 'auto', // 指示器的坐标轴。 
          //         snap: true, // 坐标轴指示器是否自动吸附到点上
          //     },
          //     showContent: true, //是否显示提示框浮层，默认显示。
          //     // triggerOn: 'mouseover', // 触发时机  'mouseover'鼠标移动时触发。     'click'鼠标点击时触发。  'mousemove|click'同时鼠标移动和点击时触发。
          //     // enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
          //     renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
          //     backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
          //     borderColor: '#333', // 提示框浮层的边框颜色。
          //     borderWidth: 0, // 提示框浮层的边框宽。
          //     padding: 5, // 提示框浮层内边距，
          //     textStyle: { // 提示框浮层的文本样式。
          //         color: '#fff',
          //         fontStyle: 'normal',
          //         fontWeight: 'normal',
          //         fontFamily: 'sans-serif',
          //         fontSize: 14,
          //     },
          //     extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的 css 样式
          //     confine: false, // 是否将 tooltip 框限制在图表的区域内。
          //     // formatter: '{b} 的成绩是 {c}'
          //     formatter: function(arg) {
          //       console.log(arg)
          //         return 12132
          //     }
          // },
      }
    },
    watch: {
      modelValue(a){
        if(a.length>0)
        {
          this.draw()
        }
      }
      // identifyCode() {
      //   this.drawPic()
      //   // console.log(8)
      // }
    },
    created(){
      // console.log(123,this.series)
    },  
    mounted() {
      this.draw()
      // console.log(this.$attrs)
    }
  }
</script>